<template>
      <div style="display:flex;min-height:500px">
                <div style="margin-right:10px">
                  <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @select="filterData">
                    <el-menu-item index="1">
                      <span slot="title">审计问题定性</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                      <span slot="title">审计报告生成</span>
                    </el-menu-item>
                  </el-menu>
                </div>
                <div class="component" v-if="tableKey==1">
                  <problem-analysis  />
                </div>
                <div style="flex:1;border-left:1px solid #f2f3f5;padding:20px;display:flex;justify-content: center;
        align-items: center;" v-else>
                   <el-empty description="正在开发中，请稍后"></el-empty>
                </div>
              </div>
</template>
<script>
import ProblemAnalysis from './component/ProblemAnalysis.vue';




export default {
  components: { ProblemAnalysis},
  name: 'AuditReport',  
  data(){
    return{
      tableKey:1,
    }
  },
  computed: {
  },
  methods:{
    filterData(index,indexPath) {
      console.log(999,index);
      this.tableKey = index
    },
  },
  mounted() {
  }
}
</script>
<style  lang="less" >
 .menu-btn {
    padding:16px;
    color: #4e5969;
    cursor: pointer;
    font-size: 14px;
  }
  .menu-btn:active {
    background: #f2f3f5;
  }
  /* 按钮悬浮颜色 */
  // .menu-btn:hover {
  //   background: #f2f3f5;
  //   border-color: #f2f3f5;
  //   color: #409eff;
  //   cursor: pointer;
  // }
  /* 按钮点击颜色 */
  .checkBtn{
    background: #f2f3f5;
    border-color: #f2f3f5;
    color: #409eff;
    cursor: pointer;
  }
  .component{
    flex:1;
    width:100%;
    border-left:1px solid #f2f3f5;
    padding:0px 20px;
    display:flex;
  }

.select-header {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
      }

      .select-header-title {
        font-size: 14px;
        margin: 14px 0;
        color: rgba(0, 0, 0, 1);
        font-weight: 600;
        padding-bottom: 10px;
        border-bottom: 1px solid #409EFF;
      }
      .code{
  margin: 20px 0px;
  min-height: 240px;
  padding: 30px;
  line-height: 40px;
  white-space: pre-wrap;       /* 允许元素内的文本换行 */
  width: 100%;
  background-color: #f4f4f4;
    border: 1px solid #ddd;
    padding: 10px;
    overflow: auto;
    font-family: 'Courier New', Courier, monospace;
}
dot {
      display: inline-block;
      height: 1em;
      line-height: 1;
      text-align: left;
      vertical-align: -0.25em;
      overflow: hidden;
    }
    dot::before {
      display: block;
      content: '...\A..\A.';
      white-space: pre-wrap;
      animation: dot 3s infinite step-start both;
    }
    @keyframes dot {
      33% {
        transform: translateY(-2em);
      }
      66% {
        transform: translateY(-1em);
      }
    }
   
</style>

